<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li><a href="#/home">首页</a></li>
      <li><a href="#/about">关于 </a></li>
    </ul>
    <div id="routerView">
      <!-- 一个代码片段 -->
    </div>
    <script>
      const routers = [
        {
          path: "#/home",
          component: "首页页面内容",
        },
        {
          path: "#/about",
          component: "关于页面内容",
        },
      ];
      const routerView = document.getElementById("routerView");
      //DOMContentLoaded 页面加载完毕后立即执行一次
      window.addEventListener("DOMContentLoaded", onHashChange);

      window.addEventListener("hashchange", onHashChange);

      function onHashChange() {
        console.log("hashchange");
        routers.forEach((item, index) => {
          if (item.path === location.hash) {
            routerView.innerHTML = item.component;
          }
        });
      }
    </script>
  </body>
</html>
